<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';

import { onMounted, reactive, ref } from 'vue';

import { DICT_TYPE, dictUtils } from '#/utils/dict';

const props = withDefaults(
  defineProps<{
    form: any;
    type: 'card' | 'modal';
  }>(),
  {
    type: 'card',
    form: () => {},
  },
);

const emit = defineEmits(['success']);

const form = reactive({ ...props.form });

export interface EditDictDataModalState {
  isUpdate: boolean;
  record: any;
}

const dictMap = reactive<any>({});

const formRef = ref<FormInstance>();

const rules: Record<string, Rule[]> = {
  type: [{ required: true, message: '请选择字典类型' }],
  name: [{ required: true, message: '请填写字典名称' }],
  value: [{ required: true, message: '请填写字典值' }],
  isDefault: [{ required: true, message: '请选择是否默认' }],
  status: [{ required: true, message: '请选择记录状态' }],
  sort: [{ required: true, message: '请填写排序' }],
};

function initForm() {
  const defaultStatus = dictUtils.getDictDefaultObjByOptions(
    dictMap.value[DICT_TYPE.sysCommonStatus].data,
  )?.value;
  form.status = form.status ?? defaultStatus;

  const defaultColorType = dictUtils.getDictDefaultObjByOptions(
    dictMap.value[DICT_TYPE.sysCommonColorType].data,
  )?.value;
  form.colorType = form.colorType ?? defaultColorType;
}

onMounted(async () => {
  dictMap.value = await dictUtils.getDictDatasAsync([
    { type: DICT_TYPE.sysCommonStatus, valueType: 'number' },
    { type: DICT_TYPE.sysCommonWhether, valueType: 'number' },
    { type: DICT_TYPE.sysCommonColorType, valueType: 'string' },
  ]);
  initForm();
});

defineExpose({
  update: () => {},
  delete: () => {},
  reset: () => {},
});
</script>
<template>
  <a-form
    ref="formRef"
    :label-col="{ style: 'width: 120px' }"
    :model="form"
    :rules="rules"
    class="grid-cols-1"
    label-class="w-full"
    layout="horizontal"
  >
    <a-form-item label="字典类型" name="type">
      <a-select
        v-model:value="form.type"
        class="w-full"
        placeholder="请选择字典类型"
      />
    </a-form-item>

    <a-form-item label="字典名称" name="name">
      <a-input
        v-model:value="form.name"
        class="w-full"
        max-length="50"
        placeholder="请填写字典名称"
      />
    </a-form-item>

    <a-form-item label="字典值" name="value">
      <a-input
        v-model:value="form.value"
        class="w-full"
        max-length="50"
        placeholder="请填写字典值"
      />
    </a-form-item>

    <a-form-item label="是否默认" name="isDefault">
      <a-radio-group
        v-model:value="form.isDefault"
        :options="dictMap[DICT_TYPE.sysCommonWhether]"
        class="w-full"
      />
    </a-form-item>

    <a-form-item label="记录状态" name="status">
      <a-radio-group
        v-model:value="form.status"
        :options="dictMap[DICT_TYPE.sysCommonStatus]"
        class="w-full"
      />
    </a-form-item>

    <a-form-item label="排序" name="sort">
      <a-input
        v-model:value="form.sort"
        class="w-full"
        max-length="50"
        placeholder="请填写排序"
      />
    </a-form-item>

    <a-form-item label="扩展字段1" name="extend1">
      <a-input
        v-model:value="form.extend1"
        class="w-full"
        max-length="50"
        placeholder="请填写扩展字段1"
      />
    </a-form-item>

    <a-form-item label="扩展字段2" name="extend2">
      <a-input
        v-model:value="form.extend2"
        class="w-full"
        max-length="50"
        placeholder="请填写扩展字段2"
      />
    </a-form-item>

    <a-form-item label="颜色类型" name="colorType">
      <a-select v-model:value="form.colorType" class="w-full" />
    </a-form-item>

    <a-form-item label="自定义样式" name="customStyle">
      <a-radio-group
        v-model:value="form.customStyle"
        :options="dictMap[DICT_TYPE.sysCommonColorType]"
        class="w-full"
        max-length="100"
        placeholder="请选择自定义样式"
      />
    </a-form-item>

    <a-form-item label="备注" name="remark">
      <a-textarea
        v-model:value="form.remark"
        :auto-size="{ minRows: 3, maxRows: 5 }"
        class="w-full"
        max-length="200"
        placeholder="请填写备注"
      />
    </a-form-item>
  </a-form>
</template>
